<template>
  <div class="home">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="defaultSearch(value)"
      />
      <ul class="dftList" v-show="value">
        <li @click="getText(i.name)" v-for="i in defaultlist" :key="i.id">
          {{ i.name }}
        </li>
      </ul>
    </form>
    <!-- 轮播 -->
    <div class="bgc">
      <div class="swpie">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banners" :key="item.id">
            <img :src="item.imageUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 圆圈导航 -->
    <div class="nav">
      <ul>
        <router-link to="/everyday">
          <li>
            <span
              ><svg
                class="icon"
                width="30px"
                height="30.00px"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#333333"
                  d="M847.962746 961.720454H174.700628c-61.990545 0-112.276582-50.249912-112.276582-112.276582V176.181754c0-61.918295 50.249912-112.168207 112.276582-112.168207h673.262118c61.918295 0 112.168207 50.249912 112.168207 112.168207v673.262118c0 62.02667-50.249912 112.276582-112.168207 112.276582z m56.029916-785.5387c0-30.959148-25.106893-56.066041-56.029916-56.066041H174.700628c-31.031398 0-56.138291 25.070768-56.138291 56.066041v673.262118c0 31.031398 25.070768 56.138291 56.138291 56.138291h673.262118c30.959148 0 56.029916-25.106893 56.029916-56.138291V176.181754z m-84.135187 673.262118a28.033021 28.033021 0 0 1 0-56.066041c15.497636 0 28.105271 12.535384 28.105271 28.033021 0 15.497636-12.643759 28.033021-28.105271 28.03302z m-308.543851 0c-185.935511 0-336.649122-150.71361-336.649121-336.649121 0-185.827136 150.71361-336.612997 336.649121-336.612997 185.827136 0 336.649122 150.78586 336.649122 336.612997 0 185.935511-150.78586 336.649122-336.649122 336.649121z m0-617.123827c-154.976364 0-280.583081 125.606717-280.58308 280.474706 0 154.976364 125.606717 280.583081 280.58308 280.58308 154.867988 0 280.51083-125.606717 280.510831-280.58308 0-154.867988-125.606717-280.474705-280.510831-280.474706z m0 448.817329c-92.985818 0-168.306498-75.356805-168.306498-168.306498s75.356805-168.306498 168.306498-168.306499c92.949693 0 168.306498 75.356805 168.306499 168.306499s-75.32068 168.306498-168.306499 168.306498z m0-280.510831c-62.02667 0-112.276582 50.249912-112.276582 112.168208 0 61.990545 50.249912 112.276582 112.276582 112.276582 61.918295 0 112.168207-50.249912 112.168208-112.276582 0.036125-61.88217-50.249912-112.168207-112.168208-112.168208z m308.543851-168.306498a28.033021 28.033021 0 0 1-28.03302-28.03302c0-15.497636 12.535384-28.105271 28.03302-28.105271 15.497636 0 28.105271 12.643759 28.105271 28.105271 0 15.497636-12.643759 28.033021-28.105271 28.03302z m-617.123827 0a28.033021 28.033021 0 0 1-28.03302-28.03302c0-15.497636 12.535384-28.105271 28.03302-28.105271 15.461511 0 28.033021 12.643759 28.033021 28.105271-0.036125 15.497636-12.571509 28.033021-28.033021 28.03302z m0 561.093911a28.033021 28.033021 0 0 1 28.033021 28.033021c0 15.497636-12.535384 28.033021-28.033021 28.03302a28.033021 28.033021 0 0 1-28.03302-28.03302c0-15.497636 12.535384-28.033021 28.03302-28.033021z"
                /></svg
            ></span>
            <p>每日推荐</p>
          </li>
        </router-link>
        <router-link to="/fm">
          <li>
            <span
              ><svg
                class="icon"
                width="30px"
                height="30.00px"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#333333"
                  d="M790.415579 285.712834h58.992168c61.918295 0 112.168207 50.177662 112.168207 112.168207v392.751288c0 61.918295-50.249912 112.168207-112.168207 112.168207H176.037254c-61.918295 0-112.168207-50.249912-112.168207-112.168207V397.917166c0-62.02667 50.249912-112.168207 112.168207-112.168207h504.341494l-213.498906-118.309461c-13.43851-7.47788-17.954138-23.914768-10.223383-36.847527 7.730756-12.824384 24.926268-17.267763 38.328654-9.789883l295.430466 164.910746z m115.022084 112.204332c0-30.959148-25.070768-56.138291-56.029916-56.138291H176.037254c-30.959148 0-56.029916 25.179143-56.029916 56.138291v392.751288c0 30.959148 25.070768 56.029916 56.029916 56.029916h673.334368c30.959148 0 56.029916-25.106893 56.029916-56.029916V397.917166h0.036125z m-252.47781 364.646018c-92.949693 0-168.306498-75.356805-168.306498-168.306499 0-92.877443 75.356805-168.306498 168.306498-168.306498 92.985818 0 168.306498 75.429055 168.306499 168.306498 0.036125 92.949693-75.32068 168.306498-168.306499 168.306499z m0-280.510831c-61.918295 0-112.168207 50.249912-112.168207 112.168207 0 61.990545 50.249912 112.276582 112.168207 112.276582 61.990545 0 112.276582-50.249912 112.276582-112.276582 0-61.918295-50.249912-112.168207-112.276582-112.168207z m-280.474705 252.47781H204.17865c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h168.306498c15.497636 0 28.033021 12.643759 28.03302 28.10527a28.033021 28.033021 0 0 1-28.03302 28.033021z m0-112.168207H204.17865c-15.461511 0-28.105271-12.535384-28.105271-28.105271 0-15.497636 12.643759-28.033021 28.105271-28.03302h168.306498c15.497636 0 28.033021 12.535384 28.03302 28.03302 0 15.533761-12.571509 28.105271-28.03302 28.105271z m0-112.276582H204.17865c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.497636 12.643759-28.033021 28.105271-28.03302h168.306498c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021z"
                /></svg
            ></span>
            <p>私人FM</p>
          </li>
        </router-link>
        <router-link to="/playlist">
          <li>
            <span
              ><svg
                class="icon"
                width="30px"
                height="30.00px"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#333333"
                  d="M878.813519 539.563395H317.719608c-15.461511 0-28.105271-12.535384-28.105271-28.03302 0-15.497636 12.643759-28.105271 28.105271-28.105271h561.093911c15.461511 0 28.033021 12.643759 28.03302 28.105271-0.036125 15.497636-12.571509 28.033021-28.03302 28.03302z m0-224.444789H317.719608c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.497636 12.643759-28.033021 28.105271-28.03302h561.093911a28.033021 28.033021 0 0 1 28.03302 28.03302c-0.036125 15.497636-12.571509 28.033021-28.03302 28.033021zM149.413109 764.008185c-15.497636 0-28.105271-12.535384-28.10527-28.105271 0-15.461511 12.643759-28.033021 28.10527-28.033021 15.497636 0 28.033021 12.535384 28.033021 28.033021-0.036125 15.569886-12.571509 28.105271-28.033021 28.105271z m0-224.44479c-15.497636 0-28.105271-12.535384-28.10527-28.03302 0-15.497636 12.643759-28.105271 28.10527-28.105271 15.497636 0 28.033021 12.643759 28.033021 28.105271-0.036125 15.497636-12.571509 28.033021-28.033021 28.03302z m0-224.444789c-15.497636 0-28.105271-12.535384-28.10527-28.033021 0-15.497636 12.643759-28.033021 28.10527-28.03302 15.497636 0 28.033021 12.535384 28.033021 28.03302-0.036125 15.497636-12.571509 28.033021-28.033021 28.033021z m168.306499 392.751287h561.093911a28.033021 28.033021 0 0 1 28.03302 28.033021c0 15.569886-12.535384 28.105271-28.03302 28.105271H317.719608c-15.461511 0-28.105271-12.535384-28.105271-28.105271 0-15.461511 12.607634-28.033021 28.105271-28.033021z"
                /></svg
            ></span>
            <p>歌单</p>
          </li>
        </router-link>
        <router-link to="rank">
          <li>
            <span
              ><svg
                class="icon"
                width="30px"
                height="30.00px"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#333333"
                  d="M821.302477 959.480703h-56.029916c-31.031398 0-56.138291-25.070768-56.138292-56.029916V566.801665c0-31.067523 25.070768-56.138291 56.138292-56.138291h56.029916c31.031398 0 56.138291 25.070768 56.138291 56.138291v336.649122c0 30.959148-25.106893 56.029916-56.138291 56.029916z m0-364.646017c0-15.497636-12.535384-28.033021-28.033021-28.033021-15.497636 0-28.033021 12.535384-28.033021 28.033021v280.474705c0 15.497636 12.535384 28.105271 28.033021 28.105271 15.497636 0 28.033021-12.643759 28.033021-28.105271v-280.474705zM540.791646 959.480703h-56.138291c-30.959148 0-56.138291-25.070768-56.138291-56.029916V117.912086c0-30.959148 25.179143-56.029916 56.138291-56.029916h56.138291c30.959148 0 56.138291 25.070768 56.138291 56.029916v785.538701c0 30.959148-25.179143 56.029916-56.138291 56.029916z m0-813.463346c0-15.569886-12.535384-28.105271-28.03302-28.105271-15.569886 0-28.105271 12.535384-28.105271 28.105271V875.309391c0 15.497636 12.535384 28.105271 28.105271 28.105271 15.461511 0 28.033021-12.643759 28.03302-28.105271V146.017357zM260.208566 959.480703H204.17865c-31.031398 0-56.138291-25.070768-56.138292-56.029916V370.389896c0-30.959148 25.070768-56.029916 56.138292-56.029916h56.029916c31.031398 0 56.138291 25.070768 56.138291 56.029916v533.060891c0 30.959148-25.106893 56.029916-56.138291 56.029916z m0-560.985536c0-15.569886-12.535384-28.105271-28.033021-28.105271-15.497636 0-28.033021 12.535384-28.03302 28.105271V875.309391c0 15.497636 12.535384 28.105271 28.03302 28.105271 15.497636 0 28.033021-12.643759 28.033021-28.105271V398.495167z"
                /></svg
            ></span>
            <p>排行榜</p>
          </li>
        </router-link>
      </ul>
    </div>
    <!-- 推荐歌单 -->
    <div class="songList">
      <p>
        推荐歌单
        <span>更多></span>
      </p>
      <div class="outer">
        <div
          class="box"
          v-for="item in songlist"
          :key="item.id"
          @click="getSongListDetail(item.id)"
        >
          <div class="cont">
            <div id="he">
              <img :src="item.picUrl" alt="" />
              <span class="songsheetplay"
                ><van-icon name="play" />{{
                  (item.playCount / 10000).toFixed(1) + "万"
                }}</span
              >
            </div>
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐歌曲 -->
    <div class="list">
      <p>
        推荐歌曲
        <span>播放 ►</span>
      </p>
      <ul>
        <router-link to="/songdetail">
          <li v-for="item in newsong" :key="item.id">
            <img :src="item.picUrl" alt="" />
            <div class="cont">
              <span class="songname">{{ item.name }}</span>
              <span class="singer" v-for="s in item.song.artists" :key="s.id"
                >- {{ s.name }}</span
              >
            </div>
            <span class="svg-play"
              ><svg
                t="1639445188487"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2374"
                width="25"
                height="25"
              >
                <path
                  d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z"
                  fill="#444444"
                  p-id="2375"
                ></path></svg
            ></span>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  reqBannerAPI,
  RecommendAPI,
  NewsongAPI,
  getSongListDetailAPI,
  defaultSearchAPI,
  searchAPI,
} from "../../api/home";
export default {
  data() {
    return {
      value: "",
      banners: [],
      songlist: [],
      newsong: [],
      defaultlist: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //歌单跳转

    async onSearch(data) {
      const res = await searchAPI(data);
      console.log("搜索", res);
      if (data) {
        this.$router.push(`/search/${data}`);
      }
    },
    async defaultSearch(params) {
      params = this.value;
      console.log(params);
      const result = await defaultSearchAPI(params);
      console.log("搜索", result);
      this.defaultlist = [
        ...result.data.result.albums,
        ...result.data.result.artists,
        ...result.data.result.songs,
      ];
    },
    getText(text) {
      this.value = text;
    },

    async getBanner() {
      const result = await reqBannerAPI();
      console.log("轮播图", result);
      this.banners = result.data.banners;
    },
    async getSonglist() {
      const result = await RecommendAPI();
      console.log("推荐歌单", result);
      this.songlist = result.data.result;
    },

    //跟去歌单id跳转到歌单详情页
    async getSongListDetail(id) {
      const result = await getSongListDetailAPI(id);
      console.log("歌单详情", result);
      this.$router.push(`/gosonglistDetail/${id}`);
    },
    async getNewsong() {
      const result = await NewsongAPI();
      console.log("推荐音乐", result);
      /* console.log(result.data.result); */
      this.newsong = result.data.result;
    },
    //跳转到歌单
    golist(id) {
      console.log(id);
      this.$router.push(`/golist/${id}`);
    },
  },
  created() {
    this.getBanner();
    this.getSonglist();
    this.getNewsong();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
/* 搜索 */
.dftList {
  display: flex;
  flex-direction: column;
  z-index: 99;
  position: absolute;
}
.dftList li {
  width: 290px;
  height: 28px;
  line-height: 28px;
  margin-left: 25px;
  margin-right: 20px;
  padding-left: 20px;
  color: #aaa;
  background-color: #fff;
}
.dftList li:hover {
  background-color: #ffc0cb;
}
/* 轮播 */
.my-swipe .van-swipe-item img {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  border-radius: 15px;
  height: 150px;
  width: 100%;
}
.swpie {
  padding: 15px 10px;
}
.bgc {
  background-color: #eee;
}
/* 圆圈导航 */
.nav {
  margin-top: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.nav ul {
  display: flex;
  margin: 0 5px;
  justify-content: space-around;
}
.nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.nav ul li span {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: rgb(255, 192, 192, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* 推荐歌单 */
.songList p {
  font-size: 20px;
  font-weight: bold;
  padding: 5px 10px 0 10px;
  margin: 10px 0px 10px 10px;
}
.songList p span {
  float: right;
  width: 62px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 14px;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  font-weight: normal;
}
.outer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 10px;
  overflow-x: scroll;
}
.box {
  height: 140px;
  width: 110px;
}
.cont {
  margin-left: 10px;
}
.cont img {
  width: 100px;
  height: 100px;
  border-radius: 15px;
}
.box .cont .text {
  font-size: 13px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#he {
  position: relative;
}
.songsheetplay {
  display: block;
  box-sizing: border-box;
  padding: 2px 7px 2px 3px;
  background-color: rgba(0, 0, 0, 0.329);
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 12px;
}
/* 推荐歌曲 */
.list {
  margin-bottom: 50px;
}
.list p {
  font-size: 20px;
  font-weight: bold;
  padding: 5px 10px 0 10px;
  margin: 10px 0px 10px 10px;
}
.list p span {
  float: right;
  width: 62px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 14px;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  font-weight: normal;
}
.list ul {
  display: flex;
  flex-direction: column;
}
.list ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 10px;
  justify-content: space-evenly;
}
.list img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}
.list .cont {
  display: flex;
  align-items: center;
  border-bottom: 1px #ddd solid;
  width: 260px;
}
.songname {
  font-weight: bold;
  color: black;
}
.singer {
  margin-left: 10px;
  font-size: 12px;
  color: #aaa;
}
.svg-play {
  line-height: 60px;
}
</style>
